<template>
  <div class="refine_lfcreate">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1">
          <div class="grid-content">
            <el-form :model="form" ref="form" label-width="150px">
              <el-row style="margin-bottom: 20px" :gutter="24">
                <label class="width-150">新增执法力量类型</label>
                <!-- <el-select v-model="form.type" @change="createType"> -->
                <el-select v-model="form.type" @change='changeType'>
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-row>
              <el-row style="margin-bottom: 20px" :gutter="24">
                <label class="width-150">所属机构</label>
                <el-select v-model="form.organiza" @change="dpChange($event)" value-key="id">
                  <el-option
                    v-for="item in ogOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="form.parentOrgName">
                  <el-option
                    v-for="item in dpOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-row>

              <el-table :data="tableData" border style="margin-bottom: 20px; width: 100%">
                <el-table-column align="center" label="序号" width="60" prop="no">

                  <template slot-scope="scope">
                    {{(scope.$index+1)<10? '0'+(scope.$index+1):scope.$index+1}}
                  </template>
                </el-table-column>
                <el-table-column align="center" :label="form.type">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.child" placeholder="请输入内容" v-if="!readOnly"></el-input>
                    <span v-else>{{scope.row.child}}</span>
                  </template>
                </el-table-column>
                <!--<div style="display: inline-block;" v-if="form.type=='执法船艇'">-->
                  <el-table-column align="center" label="MMSI">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.shipMmsi" placeholder="请输入内容" v-if="!readOnly"></el-input>
                      <span v-else>{{scope.row.shipMmsi}}</span>
                    </template>
                  </el-table-column>
                <!--</div>-->
                <!--<div>-->
                  <el-table-column align="center" label="执法证号" v-if="form.type=='执法人员'">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.personNo" placeholder="请输入内容" v-if="!readOnly"></el-input>
                      <span v-else>{{scope.row.personNo}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="证书情况" v-if="form.type=='执法人员'">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.certificate" placeholder="请输入内容" v-if="!readOnly"></el-input>
                      <span v-else>{{scope.row.certificate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="办公电话" v-if="form.type=='执法人员'">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.workPhone" placeholder="请输入内容" v-if="!readOnly"></el-input>
                      <span v-else>{{scope.row.workPhone}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="手机号" v-if="form.type=='执法人员'">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.phone" placeholder="请输入内容" v-if="!readOnly"></el-input>
                      <span v-else>{{scope.row.phone}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="职务" v-if="form.type=='执法人员'">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.position" placeholder="请输入内容" v-if="!readOnly"></el-input>
                      <span v-else>{{scope.row.position}}</span>
                    </template>
                  </el-table-column>
                <!--</div>-->

                <el-table-column align="center" label="车牌" v-if="form.type=='执法车辆'">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.carNo" placeholder="请输入内容" v-if="!readOnly"></el-input>
                    <span v-else>{{scope.row.carNo}}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="车辆类型" v-if="form.type=='执法车辆'">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.carType" placeholder="请输入内容" v-if="!readOnly"></el-input>
                    <span v-else>{{scope.row.carType}}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="60" v-if="!readOnly">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="tableData.splice(scope.$index,1)">删除
                    </el-button>

                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            <el-button type="primary" icon="el-icon-plus" class="addday" @click="addDay" circle v-if="!readOnly"></el-button>

          </div>

        </el-col>
      </el-row>
      <el-row :gutter="24" class="footerbtn">
        <el-button class="sure" @click="creatsure" v-if="!readOnly">确认</el-button>
        <el-button class="cancel" @click="creatcancel" v-if="!readOnly">取消</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
  import lawEnforceService from '@/services/LawEnforceService.js'

  export default {
    name: 'CreateForce',
    props: ['id', 'detail', 'ogOptions'],
    watch: {
      detail: function (value) {
        if (value == 'create') {
          this.title = '新建执法力量'

        } else if (value == 'edit') {
          this.title = '编辑执法力量'

        }
      }
    },
    data: function () {
      return {
        title: '新增执法力量',
        form: {
          type: '执法人员',
          organiza: '',
          parentOrgName: '',
        },
        labelName: '执法人员',
        typeOptions: [
          {
            value: '执法人员',
            label: '执法人员'
          },
          {
            value: '执法船艇',
            label: '执法船艇'
          },
          {
            value: '执法车辆',
            label: '执法车辆'
          },
          {
            value: '执法工具',
            label: '执法工具'
          }
        ],
        // ogOptions: [],
        dpOptions: [],
        tableData: [{
          no: '1',
          child: '',
        }],
        container: [],
        orgcont: [],
        shipmmsi: false,
        readOnly: false,
        detailId: null,
        createTime: null
      }
    },
    created () {
      var value = this.detail
      if (value == 'create') {
        this.title = '新建执法力量'

      } else if (value == 'edit') {
        this.title = '编辑执法力量'
        this.showDetail()
      } else if (value == 'look') {
        this.title = '查看执法力量'
        this.showDetail()
        this.readOnly = true
      }
    },
    methods: {
      showDetail () {
        let data = this.$route.params.data
        this.detailId = data.id
        this.createTime = data.createTime

        this.form.type = data.category
        if (data.organiza) {
          this.form.organiza = data.organiza
          this.ogOptions.forEach(item => {
            if (item.name == data.organiza.name) {
              this.dpOptions = item.sub
            }
          })
          this.form.parentOrgName = data.parentOrgName ? data.parentOrgName : ''
        }
        this.tableData = JSON.parse(data.content)
      },

      addDay () {
        this.tableData.push({
          no: '',
          child: ''
        })
      },
      changeType (val) {

      },
      creatsure () {
        var childList = []
        if (this.tableData.length == 1 && this.tableData[0].child == '') {
          this.$alert('请添加至少一个人员、载体或工具', '提示')
          return false
        }

        for (var n of this.tableData) {
          if (this.form.type == '执法船艇') {
            childList.push({
              'child': n.child,
              'shipMmsi': n.shipMmsi
            })
          } else if (this.form.type == '执法工具') {
            childList.push({
              'child': n.child
            })
          } else if (this.form.type == '执法车辆') {
            childList.push({
              'child': n.child,
              'carNo': n.carNo,
              'carType': n.carType
            })
          } else if (this.form.type == '执法人员') {
            childList.push({
              'child': n.child,
              'personNo': n.personNo,
              'certificate': n.certificate,
              'workPhone': n.workPhone,
              'phone': n.phone,
              'position': n.position
            })
          }

        }

        let obj = {
          amount: childList.length,
          category: this.form.type,
          content: JSON.stringify(childList),
          organiza: {id: this.form.organiza.id},
          parentOrgName: this.form.parentOrgName
        }
        if (this.title == '编辑执法力量') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          lawEnforceService.update(obj).then(res => {

            if (res) {
              this.$emit('close')
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        } else {
          lawEnforceService.create(obj).then(res => {

            if (res) {
              this.$emit('close')
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        }
      },
      creatcancel () {
        this.$emit('close')
      },

      dpChange (val) {
        this.form.parentOrgName = ''
        this.dpOptions = []
        this.dpOptions = this.form.organiza.sub
        // //
        // for (var i of this.ogOptions) {
        //   if (i.id == val) {
        //     this.dpOptions = i.sub
        //   }
        // }
      }
    }
  }

</script>

<style lang="scss">
  .refine_lfcreate{
    .el-table .cell{height: 40px !important;}
    .el-table thead th{
      height: 48px !important;
    }
    .refine_lfcreate {
      width: 100%;
      display: inline-block;

      .width-150 {
        width: 150px;
        text-align: right;
        float: left;
        margin-right: 10px;
        line-height: 40px;
      }

      .width-450 {
        width: 380px;
      }

      .el-row {
        margin-bottom: 10px;
      }

      .addday {
        margin: 10px 0;
      }
    }
  }
</style>
